// 初始化ECharts图表
initECharts();

function initECharts() {
    // 高峰小时交通量
    const peakTrafficData = {
        nodes: ["曲江", "韶关东", "丹霞", "始兴北", "珠玑"],
        trafficData: [
            { date: "10 - 10", 曲江: 607, 韶关东: 549, 丹霞: 570, 始兴北: 467, 珠玑: 392 },
            { date: "10 - 11", 曲江: 694, 韶关东: 554, 丹霞: 611, 始兴北: 519, 珠玑: 409 },
            { date: "10 - 12", 曲江: 673, 韶关东: 570, 丹霞: 602, 始兴北: 493, 珠玑: 417 },
            { date: "10 - 13", 曲江: 889, 韶关东: 645, 丹霞: 594, 始兴北: 493, 珠玑: 445 },
            { date: "10 - 14", 曲江: 854, 韶关东: 751, 丹霞: 650, 始兴北: 543, 珠玑: 456 },
            { date: "10 - 15", 曲江: 694, 韶关东: 622, 丹霞: 612, 始兴北: 541, 珠玑: 480 },
            { date: "10 - 16", 曲江: 634, 韶关东: 518, 丹霞: 571, 始兴北: 485, 珠玑: 350 },
            { date: "10 - 17", 曲江: 653, 韶关东: 583, 丹霞: 668, 始兴北: 569, 珠玑: 415 },
            { date: "10 - 18", 曲江: 677, 韶关东: 547, 丹霞: 605, 始兴北: 516, 珠玑: 430 },
            { date: "10 - 19", 曲江: 642, 韶关东: 604, 丹霞: 620, 始兴北: 518, 珠玑: 426 },
            { date: "10 - 20", 曲江: 834, 韶关东: 579, 丹霞: 537, 始兴北: 411, 珠玑: 364 },
            { date: "10 - 21", 曲江: 689, 韶关东: 614, 丹霞: 598, 始兴北: 475, 珠玑: 431 },
            { date: "10 - 22", 曲江: 712, 韶关东: 574, 丹霞: 545, 始兴北: 455, 珠玑: 423 },
            { date: "10 - 23", 曲江: 681, 韶关东: 525, 丹霞: 580, 始兴北: 437, 珠玑: 327 },
            { date: "10 - 24", 曲江: 720, 韶关东: 619, 丹霞: 671, 始兴北: 507, 珠玑: 438 },
            { date: "10 - 25", 曲江: 686, 韶关东: 605, 丹霞: 682, 始兴北: 559, 珠玑: 439 },
            { date: "10 - 26", 曲江: 752, 韶关东: 616, 丹霞: 702, 始兴北: 568, 珠玑: 420 },
            { date: "10 - 27", 曲江: 963, 韶关东: 710, 丹霞: 690, 始兴北: 549, 珠玑: 439 },
            { date: "10 - 28", 曲江: 849, 韶关东: 772, 丹霞: 729, 始兴北: 620, 珠玑: 473 },
            { date: "10 - 29", 曲江: 778, 韶关东: 614, 丹霞: 570, 始兴北: 479, 珠玑: 417 },
            { date: "10 - 30", 曲江: 649, 韶关东: 577, 丹霞: 571, 始兴北: 469, 珠玑: 359 }
        ]
    };

    const dates = peakTrafficData.trafficData.map(item => item.date);
    const peakSeriesData = peakTrafficData.nodes.map(node => ({
        name: node,
        type: 'line',
        data: peakTrafficData.trafficData.map(item => item[node])
    }));

    const peakOption = {
        title: {
            text: '',
            textStyle: { color: '#fff' }
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: peakTrafficData.nodes,
            textStyle: { color: '#fff' },
            top: '10%' // 调整图例的垂直位置
        },
        grid: {
            top: '20%', // 确保图表内容不与图例重叠
            bottom: '15%'
        },
        xAxis: {
            type: 'category',
            data: dates,
            axisLine: { lineStyle: { color: '#fff' } }
        },
        yAxis: {
            type: 'value',
            axisLine: { lineStyle: { color: '#fff' } }
        },
        series: peakSeriesData
    };

    const peakChart = echarts.init(document.getElementById('peakTrafficChart'));
    peakChart.setOption(peakOption);

    // 交通组成
    const trafficCompositionData = {
        years: ["2020年", "2021年", "2022年"],
        vehicleTypes: [
            { type: "一型车", "2020年": "65.9%", "2021年": "64.3%", "2022年": "57.9%" },
            { type: "二型车", "2020年": "16.9%", "2021年": "16.6%", "2022年": "16.9%" },
            { type: "三型车", "2020年": "14.1%", "2021年": "16.6%", "2022年": "8%" },
            { type: "四型车", "2020年": "7%", "2021年": "7%", "2022年": "13.5%" },
            { type: "五型车", "2020年": "0.9%", "2021年": "5.1%", "2022年": "5.2%" },
            { type: "六型车", "2020年": "0%", "2021年": "0.1%", "2022年": "4.1%" }
        ]
    };

    const vehicleTypes = trafficCompositionData.vehicleTypes.map(item => item.type);
    const trafficSeriesData = trafficCompositionData.vehicleTypes.map(item => ({
        name: item.type,
        type: 'bar',
        stack: 'total',
        data: trafficCompositionData.years.map(year => parseFloat(item[year].replace('%', '')))
    }));

    const trafficOption = {
        title: {
            text: '',
            textStyle: { color: '#fff' }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' }
        },
        legend: {
            data: vehicleTypes,
            textStyle: { color: '#fff' }
        },
        xAxis: {
            type: 'category',
            data: trafficCompositionData.years,
            axisLine: { lineStyle: { color: '#fff' } }
        },
        yAxis: {
            type: 'value',
            axisLine: { lineStyle: { color: '#fff' } }
        },
        series: trafficSeriesData
    };

    const trafficChart = echarts.init(document.getElementById('trafficCompositionChart'));
    trafficChart.setOption(trafficOption);

    // 区域其他高速公路交通量
    const otherHighwayTrafficData = {
        trafficData: [
            { highway: "京珠南（G4广州至韶关段）", traffic: 3838.951552 },
            { highway: "京珠北", traffic: 1441.186552 },
            { highway: "广乐高速", traffic: 3494.500862 },
            { highway: "仁新高速", traffic: 318.111121 },
            { highway: "大广高速", traffic: 2053.486207 }
        ]
    };

    const otherSeriesData = otherHighwayTrafficData.trafficData.map(item => ({
        value: item.traffic,
        name: item.highway
    }));

    const otherOption = {
        title: {
            text: '',
            left: 'center',
            textStyle: { color: '#fff' }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: otherHighwayTrafficData.trafficData.map(item => item.highway),
            textStyle: { color: '#fff' }
        },
        series: [
            {
                name: '交通量',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: otherSeriesData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    const otherChart = echarts.init(document.getElementById('otherHighwayTrafficChart'));
    otherChart.setOption(otherOption);

    // 新数据处理
    const trafficData = {
        "2023年施工封闭计划时间历史同期交通量和交通组成数据": [
            {
                "G220段高峰小时交通量分布（10月11日 - 10月31日）": [
                    { "10 - 11": "854" },
                    { "10 - 12": "840" },
                    { "10 - 13": "811" },
                    { "10 - 14": "803" },
                    { "10 - 15": "805" },
                    { "10 - 16": "804" },
                    { "10 - 17": "804" },
                    { "10 - 18": "799" },
                    { "10 - 19": "793" },
                    { "10 - 20": "790" },
                    { "10 - 21": "778" },
                    { "10 - 22": "763" },
                    { "10 - 23": "761" },
                    { "10 - 24": "764" },
                    { "10 - 25": "800" },
                    { "10 - 26": "747" },
                    { "10 - 27": "740" },
                    { "10 - 28": "737" },
                    { "10 - 29": "727" },
                    { "10 - 30": "718" },
                    { "10 - 31": "660" }
                ],
                "G323 段高峰小时交通量分布": [
                    { "10 - 11": "650" },
                    { "10 - 12": "600" },
                    { "10 - 13": "550" },
                    { "10 - 14": "500" },
                    { "10 - 15": "452" },
                    { "10 - 16": "395" },
                    { "10 - 17": "389" },
                    { "10 - 18": "385" },
                    { "10 - 19": "400" },
                    { "10 - 20": "351" },
                    { "10 - 21": "354" },
                    { "10 - 22": "349" },
                    { "10 - 23": "342" },
                    { "10 - 24": "340" },
                    { "10 - 25": "340" },
                    { "10 - 26": "334" },
                    { "10 - 27": "333" },
                    { "10 - 28": "314" },
                    { "10 - 29": "316" },
                    { "10 - 30": "305" },
                    { "10 - 31": "311" }
                ],
                "G106 曲江南华高峰小时交通量": [
                    { "10 - 14": "762" },
                    { "10 - 15": "751" },
                    { "10 - 18": "805" },
                    { "10 - 27": "696" },
                    { "10 - 12": "680" },
                    { "10 - 13": "676" },
                    { "10 - 16": "618" },
                    { "10 - 17": "616" },
                    { "10 - 19": "612" },
                    { "10 - 20": "607" },
                    { "10 - 23": "598" },
                    { "10 - 24": "573" },
                    { "10 - 25": "565" },
                    { "10 - 28": "608" },
                    { "10 - 29": "598" },
                    { "10 - 30": "569" }
                ]
            }
        ]
    };

    const trafficCompositionNew = {
        "国道交通组成": ["中小客车", "小货车", "大货车", "大客车", "特大货车", "集装箱", "摩托车"],
        "各组成比例（以 G220 为例）": [
            { "中小客车": "58.9%" },
            { "小货车": "14.8%" },
            { "大货车": "14.6%" },
            { "大客车": "8.5%" },
            { "特大货车": "13.5%" },
            { "集装箱": "0.1%" },
            { "摩托车": "0.6%" }
        ]
    };
    
    // 处理数据，转换为ECharts能够识别的格式
    function processTrafficData(data) {
        let dates = new Set();
        let seriesData = {};
    
        data.forEach((item) => {
            for (let key in item) {
                if (!seriesData[key]) {
                    seriesData[key] = [];
                }
                item[key].forEach(point => {
                    for (let date in point) {
                        dates.add(date);
                        seriesData[key].push(point[date]);
                    }
                });
            }
        });
    
        return { dates: Array.from(dates), seriesData };
    }
    
    const processedTrafficData = processTrafficData(trafficData["2023年施工封闭计划时间历史同期交通量和交通组成数据"]);
    
    // 绘制折线图
    const lineChart = echarts.init(document.getElementById('lineChart'));
    const lineChartOption = {
        title: {
            text: '高峰小时交通量分布',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: Object.keys(processedTrafficData.seriesData),
            top: '10%', 
            right: '10%' 
        },
        grid: {
            top: '20%', 
            bottom: '15%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: processedTrafficData.dates.sort()
        },
        yAxis: {
            type: 'value'
        },
        series: Object.keys(processedTrafficData.seriesData).map(key => ({
            name: key,
            type: 'line',
            data: processedTrafficData.seriesData[key]
        }))
    };
    
    lineChart.setOption(lineChartOption);

    // 绘制饼图
    const pieChart = echarts.init(document.getElementById('pieChart'));
    const pieChartOption = {
        title: {
            text: '国道交通组成比例（以 G220 为例）',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: trafficCompositionNew["国道交通组成"]
        },
        series: [
            {
                name: '交通组成',
                type: 'pie',
                radius: '50%',
                data: trafficCompositionNew["各组成比例（以 G220 为例）"].map(item => {
                    const key = Object.keys(item)[0];
                    const value = parseFloat(item[key].replace('%', ''));
                    return { name: key, value: value };
                }),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    pieChart.setOption(pieChartOption);
}
